Swift/1.2 Übergänge erstellen
Übergang "Segue" erstellen Ein Übergang (engl. segue) stellt eine Verbindung von einem ViewController zu einem anderen ViewController dar und dient dazu, zwischen Seiten innerhalb der App hin und her zu navigieren. In diesem Beispiel wird auf die Programmierung einer App eingegangen, welche mittels eines Buttons sowie eines NavigationController zwischen zwei Szenen hin und her wechselt. Starten von XCode und erstellen eines neuen Projekts Zuerst ruft man XCode auf, indem man auf das Symbol des Programms in der Symbolleiste aufruft. Alternativ kann man auch die Spotlight-Suche verwenden, indem man die Tastenkombination Cmd ⌘+ Leertaste 'verwendet und "XCode" als Suchbegriff eingibt, worauf der Link zum Programm in der Trefferliste erscheint. Im Willkommen-Bildschirm klickt man nun auf den Eintrag "'Create a new Xcode Project". Datei:XCode_Create_New_Project.png Sollte der Willkommen-Bildschirm nicht angezeigt werden, so kann man ein neues Projekt mit der Tastenkombination Shift '''+ '''Cmd ⌘+ N'. Alternativ kann man auch aus dem Hauptmenü von XCode "'File", dann "New" und dann "Project" auswählen. Datei:XCode_Create_New_Project_2.png Sollte der Willkommen-Bildschirm von XCode nicht mehr angezeigt werden, so kann dieser mit der Tastenkombination Shift '''+ '''Cmd ⌘+ 1''' angezeigt werden. Die Vorlage für unser Projekt wählen Nachdem man ein neues Projekt erstellt hat, will XCode wissen, für welches System (iOs, watchOS, tvOS oder CrossPlatform) man sein Projekt programmieren will. Weiterhin muss man entscheiden, mit welcher Vorlage man starten will und wie das Programm / die App dann aussehen soll. In diesem Fall wählen wir *'iOs '''aus, da wir eine App für ein iPhone/iPad programmieren wollen und *wählen die Vorlage "'Single View" aus, da wir nur eine Seite in unserer App brauchen. Haben wir das ausgewählt, dann klicken wir auf die Taste "Next". Datei:XCode_New_Single_View_App_iOs.png Die Optionen für das Projekt wählen Nachdem wir in der Auswahl der Vorlage für unser Projekt auf die Taste "Next" geklickt haben, gelangen wir zum Fenster mit den Auswahl der Optionen für unser neues Projekt: Datei:1.2_ÜbergängeErstellen_01.png Nach einem Klick auf die Taste "Next" legen wir den Speicherort für unser Projekt fest. Danach öffnet sich XCode mit den Einstellungen unseres Projekts. Hinzufügen eines zweiten ViewControllers Zuerst muss man den Interface Builder öffnen, indem man im linken Teil von XCode (innerhalb der Baumstruktur) auf das Main.storyboard klickt. In der Object Library rechts unten findet man als erstes den ViewController, von dessen Exemplar man rechts neben den bereits vorhandenen ViewController man einen per Drag&Drop mit der linken Maustaste einfügt, so dass zwei davon nebeneinander stehen. 400px Damit man den zweiten ViewController auch als solchen identifizieren kann, platziert man auf diesen ein Label und beschriftet dieses nach einem Doppelklick darauf mit "Zweiter ViewController" und zentriert diesen zentrisch auf dem ViewController. Quellcodedatei für den zweiten ViewController erstellen und zuweisen Jetzt hat man zwar einen zweiten ViewController, jedoch ist dieser momentan nur im Storyboard gespeichert. Wenn man auf die Elemente des zweiten ViewController per Quellcode Einfluss haben will, so muss man diesem eine Quellcodedatei zuweisen. Zuerst führt man einen Rechtsklick auf den Hauptknoten unseres Projekts aus und wählt aus dem Popup-Menü den Eintrag "New File". Datei:1.2_ÜbergängeErstellen_03.png Danach wählt man den Eintrag "Cocoa Touch Class" aus und klickt auf die Taste "Next". 400px Als nächstes gibt man der neuen Klasse den Namen "ZweiterViewController", um diese eindeutig identifizieren zu können. Als Subclass muss die Klasse "UIViewController" angegeben sein, da man die neu erstellte Klasse sonst nicht dem neu erstellten ViewController zuweisen kann, ohne eine Fehlermeldung zu erhalten. 400px Nachdem man auf die Taste "Next" geklickt hat, kann man als Speicherort den Projektordner angeben. Danach wird die neue Quellcodedatei angezeigt. Nun muss man dem zweiten ViewController noch die Klasse aus der neuen Quellcodedatei zuweisen, um diesen mit dieser zu verknüpfen. Dazu wählt man in der Projektansicht zuerst das "Main.storyboard" aus und klickt man zweiten, neu eingefügten ViewController auf das gelbe Symbol, um den ViewController selbst auszuwählen. Datei:1.2_ÜbergängeErstellen_06.png Nun weist man dem ausgewählten ViewController die Klasse "ZweiterViewController" aus unserer neu erstellten Quellcodedatei zu, um diesen mit dem Quellcode zu verknüpfen und Einfluss auf die Benutzeroberfläche zu erlangen. Dazu wählt man im Utilities-Bereich (rechteckige Taste, sieht aus wie eine Visitenkarte) zuerst den Identity Inspector aus und wählt im Bereich "Custom Class" beim Dropdown "Class" unsere Klasse "ZweiterViewController" aus. Somit ist der ViewController mit dem Quellcode verknüpft. Datei:1.2_ÜbergängeErstellen_07.png Einfügen eines Buttons als Verbinder Nun haben wir zwar zwei ViewController, jedoch erhalten wir auch eine Warnung von XCode, welche besagt, dass der zweite ViewController nicht erreicht werden kann, da er nicht mit dem ersten verbunden ist. Datei:1.2_ÜbergängeErstellen_08.png Um die beiden ViewController miteinander zu verbinden, platziert man zuerst per Drag & Drop einen Button auf dem ersten ViewController und gibt diesem nach einem Doppelklick auf ihn eine sinnvolle Beschriftung. Datei:1.2_ÜbergängeErstellen_09.png Verbinden des Buttons mit dem Übergang Um nun den Button als Verbinder einen Übergang zuzweisen, selektiert man den Button nun zuerst mit einem linken Mausklick. Danach klickt man die rechte Maustaste auf den Button und hält diese gedrückt, worauf eine blaue Linie erscheint. Diese zieht man nun zum Ziel des Übergangs, was unser zweiter ViewController ist. Datei:1.2_ÜbergängeErstellen_10.png Nach dem Loslassen der rechten Maustaste auf dem zweiten ViewController erscheint ein Popup-Menü, welches je nach Auswahl die Art des Übergangs festlegt. Datei:1.2_ÜbergängeErstellen_11.png Da nur ein einfacher Übergang von einem ViewController zum anderen gewünscht ist, wählen wir den Eintrag "Show". Nun wird die Verbindung zwischen ersten und zweiten ViewController durch eine geschwungene Verbindungslinie zwischen beiden dargestellt. Diese wählt man nun mit der linken Maustaste an und schaltet im Utilities-Bereich auf den Attributes-Inspektor. Dort gibt man der Seque den Identifier "ZweigeZweitenViewController". Dadurch lässt sich später feststellen, um welchen Übergang es sich handelt. 400px Einfügen eines NavigationControllers Wenn man nun die App im Simulator testet, so wird man feststellen, dass man zwar durch Auswahl des Buttons zum zweiten ViewController gelangt, aber nicht mehr zurück. 400px Eine Möglichkeit, wie man sich hier abhelfen kann, ist die Verwendung eines NavigationControllers. Um dies zu bewerkstelligen, wählt man zuerst den ersten NavigationController über das gelbe, runde Symbol über ihm an. Datei:1.2_ÜbergängeErstellen_14.png Nun wählt man aus dem Hauptmenü von XCode zuerst "Editor", dann "Embed in" und dann "Navigation Controller". 400px Man kann nun sehen, dass sich der Navigation Controller im Interface Builder vor den beiden ViewController mit einem Übergang geschaltet hat. Lässt man nun die App im Simulator laufen, so kann man nach der Auswahl der Taste "Weiter" im zweiten ViewController durch die Auswahl von "Back" auf wieder zum ersten ViewController zurück gehen. 400px Verwenden des NavigationControllers Man kann dem NavigationController einen Titel geben, indem man einen Doppelklick in die Mitte seiner Leiste ausführt und diesen eingibt. 400px Um vom ersten ViewController per NavigationController einen Übergang zum zweiten ViewController zu schaffen, benötigt man aus dem Object-Inspector das Objekt Bar Button Item, welches man per Drag & Drop auf die rechte Seite des NavigationControllers einfügt. 400px Mit einem Doppelklick auf das eingefügte Bar Button Item kann dessen Beschriftung geändert werden. Um einen Übergang auf den zweiten ViewController zu erstellen, kann dies wie beim Button mit Drag & Drop der rechten Maustaste geschehen. Auch sollte der Segue wieder wie beim Button ein Identifier zugewiesen werden, um diese im Programmcode später zu identifizieren. Kategorie:Swift